<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<%@ include file="/pages/html_include.jsp"%>
	<title>Google Maps</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

	<script
		src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=${requestScope.mapsKey}"
		type="text/javascript">
	</script>
	
<script type="text/javascript">

	var VERTICES_POLIGONO = 4;
	var arrayMarcadores = new Array();
	var arrayPontos = new Array();

    function MyApplication() {
      this.counter = 1;
      this.map = new GMap2(document.getElementById("map_canvas"));
	  
	  //adicionando controle de zoom e tipo
	  this.map.addControl(new GSmallMapControl());
	  this.map.addControl(new GMapTypeControl()); 	  
	  
	  //carregar coordendas anteriores
	  var x1 = '${x1}';
	  var x2 = '${x2}';
	  var x3 = '${x3}';
	  var x4 = '${x4}';
	  
	  var y1 = '${y1}';
	  var y2 = '${y2}';
	  var y3 = '${y3}';
	  var y4 = '${y4}';

	  var xCentro = '${(x1+x2+x3+x4)/4}';
	  var yCentro = '${(y1+y2+y3+y4)/4}';

	  if (x1 != '') { 
		this.map.setCenter(new GLatLng(yCentro,xCentro), 12);
	  } else {
		this.map.setCenter(new GLatLng('-12.38292833848739','-49.74609375'), 4);
	  }
		  
	  if (x1 != '' && y1 != '') {
			ponto = new GLatLng(y1,x1);
			criarPonto(this.map, ponto, this.counter);
			this.counter++;			
	  }
	  if (x2 != '' && y2 != '') {				
			ponto = new GLatLng(y2,x2);
			criarPonto(this.map, ponto, this.counter);
			this.counter++;	
	  }
	  if (x3 != '' && y3 != '') {				
			ponto = new GLatLng(y3,x3);
			criarPonto(this.map, ponto, this.counter);
			this.counter++;	
	  }
	  if (x4 != '' && y4 != '') {				
			ponto = new GLatLng(y4,x4);
			criarPonto(this.map, ponto, this.counter);
			this.counter++;	
	  }
	  //gerarPoligono(this.map);
	  
	  //Adiciona funcionalidade ao evento de click.
	  var myEventListener = GEvent.bind(this.map, "click", this, function(marker,point) {
		 if (this.counter < VERTICES_POLIGONO+1) {
			criarPonto(this.map, point, this.counter);            
		 } else {
			document.getElementById("message2").innerHTML = 'Nao e possivel marcar mais que 4 pontos.';
		 }		 		 
		 if (this.counter == VERTICES_POLIGONO) {		 
			gerarPoligono(this.map);			
		 }
		 this.counter++;		 
	  }); 	 
	  gerarPoligono(this.map); 
    }		

    function initialize() {
      var application = new MyApplication();
    }
	
	function limparPontos() {
		this.map.clearOverlays();
	}

    </script>

</head>

  <body onload="initialize()">
    <div id="map_canvas" style="width: 700px; height: 500px"></div>
	<table>
		<tr>
			<td>
				<input type="button" onclick="guardarPontos();" name="verMapa" value="guardar pontos" class="inputbut">
			</td>
			<td>
				<div id="message2" style="color: red;"></div>
			</td>
		</tr>
	</table>    
	
  </body>

</html:html>